import { DirectiveBinding } from 'vue';
import { useUserStore } from '@/store';

function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const { permission } = useUserStore();

  const hasPermission = permission.includes(value);

  // if (!hasPermission && el.parentNode) {
  //   el.parentNode.removeChild(el);
  // }
  // 采用禁用方式来控制权限而不是直接移除
  if (!hasPermission) {
    // 检查元素是否有 `disabled` 属性
    if ('disabled' in el) {
      (el as HTMLButtonElement).disabled = true;
      (el as HTMLButtonElement).classList.add('arco-btn-disabled');
    } else {
      // 如果元素不是原生支持 `disabled` 属性的，可以添加一个类来模拟禁用状态
      el.classList.add('customize-disabled ');
    }
  }
}

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
};
